<template>
  <div class="articles-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form :inline="true"
        :model="params"
        ref="params"
        class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input
          v-model="params.keyword"
          @keyup.enter.native="hSearch"
           placeholder="">
          </el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
          v-model="params.state"
          @keyup.enter.native="hSearch"
          placeholder="请选择">
            <el-option
              v-for= "state in status"
              :key="state.value"
              :label="state.label"
              :value="state.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button  @click="hClear">清除</el-button>
          <el-button type="primary" @click="hSearch">搜索</el-button>
        </el-form-item>
          <el-button
          type="success"
          icon="el-icon-edit"
          @chlid-event="parentEvent"
          @click="hAddArticle"
          class="skills">新增技巧</el-button>
      </el-form>
        <!-- 数据记录 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon>
        </el-alert>
        <!-- end -->
        <!-- 数据列表 -->
        <el-table
          :data="articleList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          highlight-current-row
          style="width: 100%">
          <el-table-column width="50" label="序号">
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column width="340" label="文章标题">
            <template slot-scope="scope">
              <span>{{scope.row.title}}</span> &nbsp;&nbsp;&nbsp;
              <i class="el-icon-film" @click="checkVideoFun(scope.row.videoURL)" v-if="scope.row.videoURL" style="color: blue;font-size: 16px;"></i>
              <div class='mask' v-if='videoState == true' @click='masksCloseFun'> </div>
                <!-- //弹窗 -->
              <div class="videomasks" v-if="videoState == true">
                <el-button type="info" icon="el-icon-close" circle class="closeVideo" @click='masksCloseFun'></el-button>
                <!-- //视频：h5的视频播放video -->
                <video :src='videoURL' controls='controls' autoplay muted>
                </video>
                </div>
            </template>
          </el-table-column>
          <el-table-column width="110" label="阅读数">
            <template slot-scope="scope">
              <span>{{scope.row.visits}}</span>
            </template>
          </el-table-column>
          <el-table-column width="110" label="录入人">
            <template slot-scope="scope">
              <span>{{scope.row.username}}</span>
            </template>
          </el-table-column>
          <el-table-column width="200" label="录入时间">
            <template slot-scope="scope">
              <span>{{scope.row.createTime | parseTimeByString}}</span>
            </template>
          </el-table-column>
          <el-table-column width="80" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state==1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            label="操作"
            width="180"
            class-name="small-padding">
            <template slot-scope="scope" class="btn">
              <el-button type="text" size="mini" @click="hPreview(scope.row)">预览</el-button>
              <el-button type="text" size="mini" @click="hStatus(scope.row)">
                <span v-if="scope.row.state==1">启用</span>
                <span v-else>禁用</span>
              </el-button>
              <el-button
                v-if="scope.row.status!='deleted'"
                size="mini"
                type="text"
                :disabled="scope.row.state==1? true: false"
                @click="hModefyArticle(scope.row)">修改
              </el-button>
              <el-button
                v-if="scope.row.status!='deleted'"
                size="mini"
                type="text"
                :disabled="scope.row.state==1? true: false"
                @click="hRemoveArticle(scope.row.id)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination" style="float: right">
          <div class="pages">
            <el-pagination
              background
              layout="prev, pager, next,sizes,jumper"
              :total="Number(total)"
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
              :current-page="Number(params.page)"
              :page-size="Number(params.pagesize)"
              :page-sizes="[10,20,30, 50]"
            ></el-pagination>
          </div>
        </div>
        <!-- end -->
        <!-- 新增文章弹层 -->
        <Dialog
        ref="refArticle"
        :article="curArticle"
        @modifyOk="getList"
        @addOk="getList">
        </Dialog>
        <!-- 预览文章弹层 -->
         <articles-preview ref="articlesPreview" :article="curArticle" ></articles-preview>
      </el-card>
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
import { list, remove, changeState } from '@/api/hmmm/articles'
import Dialog from './../components/articles-add'
import ArticlesPreview from './../components/articles-preview'

export default {
  name: 'ArticlesList',
  components: {
    Dialog,
    ArticlesPreview
  },
  data () {
    return {
      // 新增数据项
      curArticle: {
        title: '',
        articleBody: '',
        videoURL: '',
        id: ''
      },
      params: {
        page: 1,
        pagesize: 10
        // keyword: '',
        // state: ''
      },
      videoState: false,
      articleList: [],
      total: null,
      curPage: '',
      listLoading: true,
      alertText: ''
    }
  },
  computed: {
    status () {
      return status
    }
  },
  methods: {
    //  点击清除按钮清空关键字输入框
    hClear () {
      // console.log('清除了')
      // 置空表单
      this.params = {}
      this.getList()
      // this.hSearch()
    },
    // 点击图标观看、关闭视频
    checkVideoFun (videos) {
      this.videoState = true
      this.videoURL = videos
    },
    masksCloseFun () {
      this.videoState = false
    },
    parentEvent (res) {
      // console.log('子组件传递',res)
      this.getList()
    },
    // 点击搜索触发事件
    async hSearch () {
      // alert('点击了搜索')
      this.params.page = 1
      // this.getList(this.params)
      const { data: res } = await list(this.params)
      // console.log('搜索得到', res);
      this.articleList = res.items
      this.getList()
      // 优化写法 this.getList(this.params)
    },
    // 初始数据
    initialDate () {
      // 读取数据
      this.getList()
    },
    // 获取文章列表数据
    async getList (params) {
      this.listLoading = true
      const { data: res } = await list(this.params)
      // console.log('获取的结果', res)
      // 获取数据给articleList
      this.articleList = res.items
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // -每页显示信息条数
    handleSizeChange (curPage) {
      this.params.pagesize = curPage
      this.getList()
    },
    // 点击分页按钮进行列表查询
    handlePageChange (curPage) {
      //  alert(curPage)
      this.params.page = curPage
      this.getList()
    },
    // 添加文章
    hAddArticle () {
      this.curArticle.id = ''
      this.curArticle.title = ''
      this.curArticle.articleBody = ''
      this.curArticle.videoURL = ''
      this.$refs.refArticle.dialogFormShow()
    },
    // 修改文章
    hModefyArticle (curRow) {
      // console.log('这是弹层', curRow);
      // // 1、获取当前行数据，传给弹层
      this.curArticle.id = curRow.id
      this.curArticle.title = curRow.title
      this.curArticle.articleBody = curRow.articleBody
      this.curArticle.videoURL = curRow.videoURL
      this.$refs.refArticle.dialogFormShow()
    },
    // 预览文章
    hPreview (article) {
      console.log('预览的是', article)
      this.curArticle = article
      this.$refs.articlesPreview.dialogFormShow()
    },
    // 删除文章
    hRemoveArticle (article) {
      this.$confirm('将永久删除文章，是否确定？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        remove({
          id: article
        }).then(() => {
          this.$message.success('删除文章成功')
          this.articleList.splice(article, 1)
          this.getList(this.params)
          this.listLoading = false
        }).catch(() => {
          this.$message.error('删除失败!')
        })
      }).catch(() => {
        this.$message.info('您已取消删除!')
      })
    },
    // 启用、禁用状态切换
    async hStatus (article) {
      this.listLoading = true
      await changeState({
        id: article.id,
        state: article.state === 1 ? 0 : 1
      })
      // this.$message.success('修改状态成功')
      article.state = article.state === 1 ? 0 : 1
      this.listLoading = false
      this.getList()
    }
  },
  // 挂载结束
  mounted: function () {},
  // 创建完毕状态
  created () {
    this.getList()
  },
  // 组件更新
  updated: function () {}
}
</script>
<style  lang="less" scoped>
/deep/.skills {
  float: right;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
</style>

<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
.mask{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index:10;
background-color: rgba(0, 0, 0, .2);
opacity: .6;
}
/* 内容层 z-index要比遮罩大，否则会被遮盖 */
.videomasks{
    max-width: 1200px;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 20;
    transform: translate(-50%,-50%);
  }
  .videomasks video{
    position: relative;
    width: 600px;
    height: 400px;
  }
  .videomasks .closeVideo {
    width: 50px;
    height: 50px;
    position: absolute;
    top: -35px;
    left: 50%;
    margin-left: -25px;
  }
</style>
